<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.searchKey"
          :placeholder="$t('sys.middleware_mqtt_please_enter')"
          size="small"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData()"
          >{{ $t("sys.search") }}
        </el-button>
        <el-button @click="handleReset">{{ $t("sys.reset") }}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10 ds-table"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="key" :label="$t('sys.middleware_mqtt_key')">
        <template slot-scope="scope">
          <div class="status_box">
            <span
              class="MQTT_status"
              :class="
                scope.row.mqttSettings && scope.row.mqttSettings.length
                  ? scope.row.mqttSettings[0].connectStatus
                  : 'DISABLE'
              "
            ></span>
            {{ scope.row.key }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('sys.middleware_mqtt_name')" />
      <el-table-column prop="notes" :label="$t('sys.description')" />
      <el-table-column
        prop="mqttSettings"
        :label="$t('sys.middleware_mqtt_domain_name')"
      >
        <template slot-scope="scope">
          {{
            scope.row.mqttSettings && scope.row.mqttSettings.length
              ? scope.row.mqttSettings[0].host
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mqttSettings" :label="$t('sys.port')">
        <template slot-scope="scope">
          {{
            scope.row.mqttSettings && scope.row.mqttSettings.length
              ? scope.row.mqttSettings[0].port
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mqttSettings" :label="$t('sys.username')">
        <template slot-scope="scope">
          {{
            scope.row.mqttSettings && scope.row.mqttSettings.length
              ? scope.row.mqttSettings[0].username
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mqttSettings" :label="$t('sys.password')">
        <template slot-scope="scope">
          {{
            scope.row.mqttSettings && scope.row.mqttSettings.length
              ? "******"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" :label="$t('sys.operation')" width="100">
        <template slot-scope="scope">
          <span
            class="table-actionItem"
            v-if="
              scope.row.mqttSettings &&
              scope.row.mqttSettings.length &&
              scope.row.mqttSettings[0].status === 0
            "
          >
            <el-popconfirm
              :title="$t('sys.middleware_mqtt_enable')"
              placement="top"
              @confirm="handleAble(scope.row, 1)"
            >
              <el-button type="text" slot="reference">{{
                $t("sys.enable")
              }}</el-button>
            </el-popconfirm>
          </span>
          <span
            class="table-actionItem"
            v-if="
              scope.row.mqttSettings &&
              scope.row.mqttSettings.length &&
              scope.row.mqttSettings[0].status === 1
            "
          >
            <el-popconfirm
              :title="$t('sys.middleware_mqtt_disable')"
              placement="top"
              @confirm="handleAble(scope.row, 0)"
            >
              <el-button class="link-danger" type="text" slot="reference">{{
                $t("sys.disable")
              }}</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getHmmqttList,
  getHmmqttConnectstatus,
  putHmmqttStatusByMqttKeyByStatus,
} from "@/apis/paas/HmMqttLinkController.js"
export default {
  name: "MqttList",
  data() {
    return {
      loading: false,
      queryData: {},
      tableData: [],
      statusMap: {},
      timer: null,
    }
  },
  created() {
    this.loadAllData()
  },
  async beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    async loadAllData() {
      this.loadData()
    },
    loadData() {
      this.loading = true
      const params = {
        ...this.queryData,
      }
      getHmmqttList(params)
        .then((res) => {
          this.tableData = res
          this.initStatusTimer(params)
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleReset() {
      this.queryData = {}
      this.loadData()
    },
    initStatusTimer(params) {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(async () => {
        try {
          this.statusMap = await getHmmqttConnectstatus(params)
          this.tableData.forEach((item) => {
            if (item.mqttSettings && item.mqttSettings.length) {
              item.mqttSettings[0].connectStatus = this.statusMap[item.key]
            }
          })
        } catch (error) {
          this.statusMap = {}
        }
      }, 1000)
    },
    async handleAble(data, status) {
      console.log({ mqttKey: data.key, status }, "data")
      await putHmmqttStatusByMqttKeyByStatus({ mqttKey: data.key, status })
      this.$message.success(this.$t("sys.operation_success"))
      this.loadData()
    },
  },
}
</script>
<style lang="scss" scoped>
.ds-table {
  .status_box {
    display: flex;
    align-items: center;
    .MQTT_status {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .DISABLE {
      background: rgb(128, 128, 128);
      box-shadow: 0px 0px 2px 2px rgba(128, 128, 128, 0.6);
    }
    .DIS_CONNECTED {
      background: rgb(221, 97, 97);
      box-shadow: 0px 0px 2px 2px rgba(221, 97, 97, 0.6);
    }
    .CONNECTING {
      background: rgb(230, 162, 60);
      box-shadow: 0px 0px 2px 2px rgba(230, 162, 60, 0.6);
    }
    .CONNECTED {
      background: rgb(103, 194, 58);
      box-shadow: 0px 0px 2px 2px rgba(103, 194, 58, 0.6);
    }
  }
}
</style>
